<!-- *@description:  -->
<!-- *@Author: Platina -->
<!-- *@Date: 2025-07-11 10:20:01 -->
<template>
  <div class="Equipment">
    <div class="EquipmentTitle">
      <div class="backG"></div>
      <div class="fwb zindex999 mr47">事件分析</div>
    </div>
    <div class="EquipmentContent">
      <div class="eventBox">
        <div class="w100 h100 innerBox">
          <div class="tagBox">
            <div class="tagTop f14">
              告警
            </div>
            <div class="tagMiddle f14">
              <img src="/EquipmentResources/warning.svg">
              <span>1300</span>
            </div>
          </div>
          <div class="detailsBox">
            <div class="details">
              <div class="detailsTop">
                <div class="redLinear"></div>
                <div class="zindex999">
                  &nbsp;未处理
                </div>

              </div>
              <div class="detailsMiddle" style="color:#DD3E3E ;">82</div>
            </div>
            <div class="details">
              <div class="detailsTop">
                <div class="blueLinear"></div>
                <div class="zindex999">
                  &nbsp;处理中
                </div>

              </div>
              <div class="detailsMiddle" style="color:#269BDC ;">60</div>
            </div>
            <div class="details">
              <div class="detailsTop">
                <div class="greenLinear"></div>
                <div class="zindex999">
                  &nbsp;已处理
                </div>

              </div>
              <div class="detailsMiddle" style="color:#26BB2C ;">192</div>
            </div>
          </div>
        </div>
      </div>
      <div class="eventBox">
        <div class="w100 h100 innerBox">
          <div class="tagOrderBox">
            <div class="tagTop f14">
              工单
            </div>
            <div class="tagMiddle f14">
              <img src="/EquipmentResources/workOrder.svg">
              <span>1300</span>
            </div>
          </div>
          <div class="detailsBox">
            <div class="details">
              <div class="detailsTop">
                <div class="redLinear"></div>
                <div class="zindex999">
                  &nbsp;未处理
                </div>

              </div>
              <div class="detailsMiddle" style="color:#DD3E3E ;">82</div>
            </div>
            <div class="details">
              <div class="detailsTop">
                <div class="blueLinear"></div>
                <div class="zindex999">
                  &nbsp;处理中
                </div>

              </div>
              <div class="detailsMiddle" style="color:#269BDC ;">60</div>
            </div>
            <div class="details">
              <div class="detailsTop">
                <div class="greenLinear"></div>
                <div class="zindex999">
                  &nbsp;已处理
                </div>

              </div>
              <div class="detailsMiddle" style="color:#26BB2C ;">192</div>
            </div>
          </div>
        </div>
      </div>
      <div class="eventBox">
        <div class="w100 h100 innerBox">
          <div class="summarize">
            <div class="summarizeTop flexCenter f18">报告总数</div>
            <div class="summarizeMiddle flexCenter">
              3920
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { } from "vue";
</script>

<style lang="scss" scoped>
.Equipment {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;


  .ml23 {
    margin-left: 23px;
  }

  .mr47 {
    margin-right: 47px;
  }

  .mr10 {
    margin-right: 10px;
  }

  .h100 {
    height: 100%;
  }

  .w100 {
    width: 100%;
  }

  .f12 {
    font-size: 12px;
  }

  .f14 {
    font-size: 14px;
  }

  .f16 {
    font-size: 16px;
  }

  .f18 {
    font-size: 18px;
  }

  .f20 {
    font-size: 20px;
  }

  .f24 {
    font-size: 24px;
  }

  .fwb {
    font-weight: bold;
  }

  .zindex999 {
    position: relative;
    z-index: 999;
  }

  .CommonImg {
    height: 100%;
  }

  .flexCenter {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flexBetween {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .EquipmentTitle {
    height: 4vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: end;
    font-size: 24px;
    color: #fff;

    .backG {
      width: 95%;
      height: 7vh;
      position: absolute;
      background: url("@/assets/secondTitle/rightBg.svg") no-repeat center center;
      background-size: cover;
      background-size: 100% 100%;
      left: 2vh;
      bottom: -2.5vh;
      z-index: 9;
    }
  }

  .EquipmentContent {
    flex: 1;
    padding: 20px 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #fff;

    .eventBox {
      width: 100%;
      height: 10.9vh;
      background: url("@/assets/secondTitle/boxBg.svg") no-repeat center center;
      background-size: cover;
      background-size: 100% 100%;

      .innerBox {
        padding: 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tagBox {
          width: 102px;
          height: 66px;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid;
          border-image: linear-gradient(270deg, rgba(253, 99, 99, 1), rgba(255, 165, 132, 1), rgba(255, 100, 100, 1)) 1 1;
          display: flex;
          flex-direction: column;

          .tagTop {
            width: 102px;
            height: 26px;
            background: rgba(255, 100, 100, 0.3);
            border-radius: 0px 0px 0px 0px;
            line-height: 26px;
            text-align: center;
          }

          .tagMiddle {
            flex: 1;
            width: 100%;
            display: flex;
            box-sizing: border-box;
            padding: 10px;
            justify-content: space-between;
            align-items: center;

            span {
              font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
              font-weight: 900;
              font-size: 20px;
              color: #FD6363;
              line-height: 20px;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }
          }
        }

        .tagOrderBox {
          width: 102px;
          height: 66px;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid;
          border-image: linear-gradient(270deg, rgba(17, 149, 233, 1), rgba(49, 231, 253, 1), rgba(17, 150, 234, 1)) 1 1;
          display: flex;
          flex-direction: column;

          .tagTop {
            width: 102px;
            height: 26px;
            background: rgba(17, 150, 234, 0.6);
            border-radius: 0px 0px 0px 0px;
            line-height: 26px;
            text-align: center;
          }

          .tagMiddle {
            flex: 1;
            width: 100%;
            display: flex;
            box-sizing: border-box;
            padding: 10px;
            justify-content: space-between;
            align-items: center;

            span {
              font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
              font-weight: 900;
              font-size: 20px;
              color: #1195E9;
              line-height: 20px;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }
          }
        }

        .detailsBox {
          width: 208px;
          height: 54px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .details {
            width: 56px;
            height: 54px;
            display: flex;
            flex-direction: column;

            .detailsTop {
              width: 56px;
              height: 20px;
              font-weight: 400;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 20px;
              text-align: left;
              position: relative;

            }

            .detailsMiddle {
              flex: 1;
              font-weight: 400;
              font-size: 20px;
              display: flex;
              justify-content: start;
              align-items: center;
            }
          }
        }

        .summarize {
          width: 330px;
          height: 66px;
          border: 1px solid;
          border-image: linear-gradient(270deg, rgba(12, 148, 211, 1), rgba(0, 172, 252, 1), rgba(6, 99, 143, 1)) 1 1;
          display: flex;
          flex-direction: column;

          .summarizeTop {
            width: 330px;
            height: 26px;
            background: rgba(0, 172, 252, 0.2);
          }

          .summarizeMiddle {
            flex: 1;
            width: 100%;
            font-weight: 900;
            font-size: 20px;
            color: #1195E9;


          }
        }
      }
    }
  }

  .redLinear {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 7px;
    z-index: 9;
    background: linear-gradient(90deg, #DD3E3E 0%, rgba(221, 62, 62, 0) 100%);
    border-radius: 0px 0px 0px 0px;
  }

  .blueLinear {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 7px;
    background: linear-gradient(86deg, #229FE7 0%, rgba(51, 161, 222, 0) 100%);
    border-radius: 0px 0px 0px 0px;
  }

  .greenLinear {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 7px;
    background: linear-gradient(90deg, #26BB2C 0%, rgba(38, 187, 44, 0) 100%);
    border-radius: 0px 0px 0px 0px;
  }

}
</style>
